<template>
  <div id="solution">
    <div class="solution_top"></div>
    <div class="MA">
      <Tabs @on-click="change">
        <TabPane  icon="solution-1" label="财报风控"></TabPane>
        <TabPane  icon="solution-2" label="智能审计"></TabPane>
        <TabPane  icon="solution-3" label="财务中台"></TabPane>
      </Tabs>
    </div>
    <div>
      <div class="MA">
        <div class="solution_content">
          <div class="solution_content_top" @click="click" >财报风控</div>
           <div ref="solution_ele_1" class="solution_img">
            <div :class="solution_1?'magictime slideLeftRetourn': 'none'">
              <img src="/static/img/solution_1.png" alt srcset />
            </div>
          </div>
          <div>
            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>商业痛点</span>
            </div>
            <div class="solution_content_dec">
                面对国内企业财务报表失真情况严重，中小企业财务数据不完备，使用传统财务模型分析新产业失灵的窘境下，金融机构和投资者如何低成本高效地识别财务报表粉饰部分，洞察企业真实的经验情况，在暴雷前提前获得预计？
            </div>

            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>解决方案</span>
            </div>
            <div class="solution_content_dec">
              <div>
                <span></span> 数行科技提出人机融合的财务分析创新模型，结合专家经验和大数据人工智能识别欺诈
              </div>
              <div>
                <span></span> 通过四维度框架反欺诈分析和相互交叉验证，发现财务和运营数据粉饰
              </div>
              <div>
                <span></span>  通过非财务数据构建企业第四报表，突破传统传统财务分析局限
              </div>
              
            </div>
          </div>
         
        </div>
      </div>
    </div>
    <div style="background:rgba(249,249,249,1);">
      <div class="MA">
        <div class="solution_content">
          <div class="solution_content_top">智能审计</div>
         
          <div>
            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>商业痛点</span>
            </div>
            <div class="solution_content_dec">
              作为审计的重要组成部分-财务审计，一直面临的人工审计速度慢效率低，财务专业知识要求高，基于财务的数据分析人工工作量大等工作瓶颈和难题。但财务审计又是发现内部问题和量化企业风险的最有力和最直接的工具，所以财务审计的效率和准确性极大地影响整个审计工作的进度和成果。
            </div>

            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>解决方案</span>
            </div>
            <div class="solution_content_dec">
              <div>
                <span></span> 数行科技提供智能财务审计和财务运营风险分析工具，节约大部分人工阅读财务报表和分析财务数据的时间
              </div>
              <div>
                <span></span> 借助信息系统的算力和大数据人工智能技术，提高整个财务审计的效率和精度 
              </div>
              <div>
                <span></span>  通过财务运营分析，不仅发现并预防错误和舞弊，而且探明企业运营短板，提前预测财务风险，从而提高企业的经营效率，增加企业的价值
              </div>
              
            </div>
          </div>
           <div ref="solution_ele_2" class="solution_img">
            <div :class="solution_2?'magictime vanishIn': 'none'">
              <img src="/static/img/solution_2.png" alt srcset />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="MA">
        <div class="solution_content">
          <div class="solution_content_top">财务中台</div>
           <div ref="solution_ele_3" class="solution_img">
            <div :class="solution_3?'magictime boingInUp': 'none'">
              <img src="/static/img/solution_3.png" alt srcset />
            </div>
          </div>
          <div>
            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>商业痛点</span>
            </div>
            <div class="solution_content_dec">
              传统模式下，企业的经营活动会产生大量的业务数据。财务人员需要根据业务数据，进行会计核算，并输出财务数据。通过这些财务数据，企业可以进行财务管理、财务分析、业务决策。但会计核算的工作量非常庞大，大多工作也比较基础、简单，可以被计算机替代。企业每年在基础的核算工作上会花费大量的人力资源，在更重要的财务管理、财务分析、业务决策上无暇顾及。
            </div>

            <div class="solution_content_title">
              <span class="solution_pointer_box">
                <span class="solution_pointer"></span>
              </span>
              <span>解决方案</span>
            </div>
            <div class="solution_content_dec">
              <div>
                <span></span> 帮助企业构建财务中台，形成业务系统和财务系统间的桥梁
              </div>
              <div>
                <span></span> 通过数行科技的财务数据决策支持系统，建立起数据反哺业务的数据驱动运营模式
              </div>
              <div>
                <span></span> 数据中台将企业的“数据管理能力”进行沉淀，助力企业打造以财务体系为基础的数据服务公司
              </div>
             
            </div>
          </div>
         
        </div>
      </div>
    </div>
    <End />
  </div>
</template>

<script>
import { Tabs, TabPane } from "view-design";
export default {
  name: "solution",
  dec: "解決方案",
  components: {
    Tabs,
    TabPane,
    End: require("../end/end.vue")
  },
  data() {
    return {
      solution_1: false,
      solution_2: false,
      solution_3: false,
      winH: 0,
      ele2_top: 0,
      ele3_top: 0,
      arr: ['财报风控', '智能审计', '财务中台']
    };
  },
  mounted() {
    var ele1 = this.$refs.solution_ele_1;
    setTimeout(() => {
      this.solution_1 = true;
    }, 200);
    var id = this.$route.query.id
    setTimeout(() => {
      if(id) $(' .ivu-tabs-tab').eq(id).click()
    }, 0);
    
    

    this.ele2_top = this.getElementTop(this.$refs.solution_ele_2);

    this.ele3_top = this.getElementTop(this.$refs.solution_ele_3);
    this.winH = window.screen.height / 2;
    document.onscroll = this.scroll.bind(this);
  },
  methods: {
    change (tabsindex) {
      var content =  this.arr[tabsindex]
      var top = this.getElementTop($(`.solution_content_top:contains(${content})`)[0])
       $('html,body').animate({scrollTop: top}, 800)
    },
    scroll() {
      var scrollTop = document.documentElement.scrollTop; //卷去的高度

      if (scrollTop + this.winH > this.ele2_top) {
        this.solution_2 = true;
      }
      if (scrollTop + this.winH > this.ele3_top) {
        this.solution_3 = true;
      }
    },
    getElementTop(element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;

      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }

      return actualTop;
    },
    click() {
      
    }
  }
};
</script>
<style lang="less">
@import url("../../main.less");
#solution {
  .solution_top {
    height: 0.9rem;
    background: url("/static/img/solution_bg.png") no-repeat;
    background-size: 100%;
  }
  .ivu-tabs-nav {
    width: 100%;
    font-size: 0.24rem;
    margin-top: 0.82rem;
    .ivu-tabs-tab {
      margin: 0;
      width: 33%;
      height: auto;
      text-align: center;
      .ivu-icon {
        display: block;
        margin: 0 auto;
        width: 0.58rem;
        height: 0.58rem;
        font-size: 0.58rem;
      }
    }
  }
  .solution_content {
    padding: 0.8rem 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .solution_content_title {
      font-size: 0.24rem;

      font-weight: 500;
      color: rgba(30, 30, 30, 1);
      text-indent: 0.45rem;
      letter-spacing: 2px;
      position: relative;
      font-weight: 700;
      .solution_pointer_box {
        display: inline-block;
        width: 0.36rem;
        height: 0.36rem;
        background: rgba(222, 235, 255, 1);
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;

        .solution_pointer {
          border-radius: 50%;
          width: 55%;
          height: 55%;
          background: linear-gradient(
            180deg,
            rgba(44, 104, 183, 1) 0%,
            rgba(97, 153, 235, 1) 100%
          );
        }
      }
    }
    .solution_content_dec {
      font-size: 0.22rem;

      font-weight: 400;
      color: #272068;

      letter-spacing: 1px;
      margin-top: 0.16rem;
      margin-bottom: 0.32rem;
       line-height:0.35rem;

      > div {
    
    
       
        padding-left:0.18rem;
      
        position: relative;
        margin-bottom: 0.12rem;
        > span {
          display: inline;
          position: absolute;
          line-height: normal;
          border-radius: 50%;
          width: 0.08rem;
          height: 0.08rem;
          text-indent: 0;
          left: 0;
         
          top: 0.11rem;
          
          background: #4781D2;
        }
      }
    }
    > div {
      width: 49%;
    }
    > .solution_content_top {
      width: 100%;
      font-size: 0.28rem;

      font-weight: 700;
      color: rgba(30, 30, 30, 1);

      letter-spacing: 2px;
      text-align: center;
      margin-bottom: 0.75rem;
    }
    .solution_img {
      > div {
       
        width: 5.5rem;
        height: 3.61rem;
        padding: 0.2rem;
        min-width: 0.4rem;
        > img {
          display: block;
          width: 100%;
       
        }
      }
      >.none{
         display: none;
      }
    }
    .solution_block {
      display: block !important;
    }
  }
}
</style>